<template>
  <div>

<!--    头-->
    <div style="padding: 20px 20px 0px 20px">
    <el-form :inline="true" :model="productInput" class="demo-form-inline">
      <span style="font-size: 35px">商品列表</span>
      <el-form-item style="float: right;margin-top: 8px">
        <el-button type="primary" @click="addProductShow = true">添加商品</el-button>
      </el-form-item>
      <el-form-item style="float: right;margin-top: 8px">
        <el-button type="primary" @click="getProduct">查询</el-button>
      </el-form-item>

      <el-form-item style="float: right;margin-top: 8px">
        <el-input v-model="productInput.name" placeholder="商品名称"></el-input>
      </el-form-item>

    </el-form>

<!--      表格-->
      <el-table
          :data="productData"
          style="width: 100%;"
          :show-overflow-tooltip="false"
          height="792"
          :border="true"
      >
        <el-table-column
            prop="name" label="产品名称" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="types" label="产品分类" :show-overflow-tooltip="true" :formatter="isType">
        </el-table-column>
        <el-table-column
            prop="price" label="原价" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="fee" label="现价" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="describes" label="产品介绍" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="img" label="产品图片" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="imglist" label="产品图片列表" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="sales" label="销量" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="see" label="浏览次数" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="status" label="状态" :show-overflow-tooltip="true" :formatter="isStatus">
        </el-table-column>
        <el-table-column label="操作" min-width="80">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="update(scope.$index, scope.row)">修改</el-button>
                      <el-button
                          size="mini"
                          @click="isSpecs(scope.$index, scope.row)">规格</el-button>
          </template>
        </el-table-column>
      </el-table>
<!--      分页-->
      <el-pagination
          background
          layout="prev, pager, next"
          @current-change="page"
          :page-size="productPage.size"
          :total="this.productPage.total"
          style="margin-top: 10px;">
      </el-pagination>
    </div>
<!--添加商品-->
    <el-dialog
        :visible.sync="addProductShow"
        width="30%"
        :before-close="addProductClose"
        style="text-align: center"
        :close-on-click-modal="false"
    >
      <el-form label-width="80px" :model="addProductData">
        <el-form-item label="名称">
          <el-input v-model="addProductData.name"></el-input>
        </el-form-item>

        <el-form-item label="图片" style="text-align: left">
          <el-upload
              list-type="picture-card"
              action="http://8.136.105.10:8081/putImg"
              :show-file-list="false"
              :on-success="handleAvatarSuccess">
            <i class="el-icon-plus" v-if="imgShow"></i>
            <img width="100%" height="100%" :src="addProductData.img" v-if="!imgShow">
          </el-upload>
        </el-form-item>
        <el-form-item label="图片组" style="text-align: left">
          <el-upload
              action="http://8.136.105.10:8081/putImg"
              list-type="picture-card"
              :on-success="handleSuccess"
              :on-remove="handleRemove"
              :file-list="imgLists"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="分类" style="text-align: left">
          <el-select v-model="addProductData.types" placeholder="请选择产品分类">
            <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="原价">
          <el-input v-model="addProductData.price"></el-input>
        </el-form-item>
        <el-form-item label="现价">
          <el-input v-model="addProductData.fee"></el-input>
        </el-form-item>
        <el-form-item label="产品介绍">
          <el-input v-model="addProductData.describes"></el-input>
        </el-form-item>
        <el-button type="primary" plain
                   style="width: 150px;height: 50px ;font-size: 25px;"
                   @click="addProduct">确定添加</el-button>



      </el-form>

    </el-dialog>
<!--    修改-->
    <el-dialog
        :visible.sync="updateProduct"
        width="30%"
        :before-close="ProductClose"
        style="text-align: center"
        :close-on-click-modal="false"
    >
      <el-form label-width="80px" :model="productDataRow">

        <el-form-item label="名称">
          <el-input v-model="productDataRow.name" ></el-input>
        </el-form-item>

        <el-form-item label="图片">
          <el-upload
              class="avatar-uploader"
              action="http://8.136.105.10:8081/putImg"
              :show-file-list="false"
              :on-success="alterHandleSuccess"
              style="text-align: left"
          >
            <img  :src="productDataRow.img" class="avatar" style="width: 100px;height: 100px">
          </el-upload>
        </el-form-item>
        <el-form-item label="图片列表">
          <el-row>
            <el-col :span="8">
              <el-upload
                  class="avatar-uploader"
                  action="http://8.136.105.10:8081/putImg"
                  :show-file-list="false"
                  :on-success="handleSuccess0"
              >
                <img  :src="imgList[0]" class="avatar" style="width: 100px;height: 100px">
              </el-upload>
            </el-col >
            <el-col :span="8">
              <el-upload
                  class="avatar-uploader"
                  action="http://8.136.105.10:8081/putImg"
                  :show-file-list="false"
                  :on-success="handleSuccess1"
              >
                <img  :src="imgList[1]" class="avatar" style="width: 100px;height: 100px">
              </el-upload>
            </el-col >
            <el-col :span="8">
              <el-upload
                  class="avatar-uploader"
                  action="http://8.136.105.10:8081/putImg"
                  :show-file-list="false"
                  :on-success="handleSuccess2"
              >
                <img  :src="imgList[2]" class="avatar" style="width: 100px;height: 100px">
              </el-upload>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="分类" style="text-align: left">
          <el-select v-model="productDataRow.types" placeholder="请选择产品分类">
            <el-option
                v-for="item in typeList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="原价">
          <el-input v-model="productDataRow.price" ></el-input>
        </el-form-item>
        <el-form-item label="现价">
          <el-input v-model="productDataRow.fee" ></el-input>
        </el-form-item>
        <el-form-item label="产品介绍">
          <el-input v-model="productDataRow.describes" ></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="productDataRow.status">
            <el-radio :label="0">下架</el-radio>
            <el-radio :label="1">上架</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-button type="primary" plain
                   style="width: 150px;height: 50px ;font-size: 25px;"
                   @click="ProductUpdate">确定修改</el-button>

      </el-form>
    </el-dialog>
<!--    规格-->
    <el-dialog  :visible.sync="specsShow" style="text-align: center" :before-close="specsClose" >
<!--      修改规格-->
      <el-dialog
          width="30%"
          :visible.sync="alterSpecsShow"
          :before-close="alterSpecsClose"
          style="text-align: center"
          :close-on-click-modal="false"
          append-to-body>
        <el-form label-width="80px" :model="alterSpecsData">
          <el-form-item label="名称">
            <el-input v-model="alterSpecsData.name" ></el-input>
          </el-form-item>
          <el-form-item label="库存">
            <el-input v-model="alterSpecsData.stock" ></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="alterSpecsData.fee" ></el-input>
          </el-form-item>
          <el-button type="primary" plain
                     style="width: 150px;height: 50px ;font-size: 25px;"
                     @click="isAlterSpecs">确定添加</el-button>

        </el-form>
      </el-dialog>
<!--      添加规格-->
      <el-dialog
          width="30%"
          title="添加规格"
          :visible.sync="addSpecsShow"
          :before-close="addSpecsClose"
          style="text-align: center"
          :close-on-click-modal="false"

          append-to-body>
        <el-form label-width="80px" :model="addSpecsData">
          <el-form-item label="规格名称">
            <el-input v-model="addSpecsData.name" ></el-input>
          </el-form-item>
          <el-form-item label="库存">
            <el-input v-model="addSpecsData.stock" ></el-input>
          </el-form-item>
          <el-form-item label="价格">
            <el-input v-model="addSpecsData.fee" ></el-input>
          </el-form-item>
          <el-button type="primary" plain
                     style="width: 150px;height: 50px ;font-size: 25px;"
                     @click="addSpecs">确定添加</el-button>


        </el-form>

      </el-dialog>

<!--      规格表格-->
      <el-table
          :data="specsData"
          style="width: 100%;"
          :show-overflow-tooltip="false"
          :border="true"
      >
        <el-table-column
            prop="name" label="规格名称" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="stock" label="库存" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column
            prop="fee" label="价格" :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column label="操作" min-width="80">
          <template slot-scope="scope">
            <el-button
                size="mini"
                @click="alterSpecs(scope.$index, scope.row)">修改</el-button>
            <el-button
                size="mini"
                @click="deletSpecs(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="primary" plain
                 style="width: 150px;height: 50px ;font-size: 25px;margin-top: 20px"
                 @click="addSpecsShow = true">添加规格</el-button>

    </el-dialog>

  </div>
</template>

<script>
import as from "@/axios/axios";

export default {
name: "StoreProduct",
  created() {
    this.getProduct()
    this.getType()
  },
  data(){
    return {
      updateProduct:false,
      imgShow:true,
      addProductShow:false,
      specsShow:false,
      alterSpecsShow:false,
      addSpecsShow:false,
      specsRowData:{},
      addProductData:{img:"",sid:localStorage.getItem("storeId")*1},
      typeList:[],
      imgList:[],
      imgLists:[],
      productInput:{},
      addSpecsData:{},
      alterSpecsData:{},
      specsData:[],
      productData:[],
      productDataRow:{},
      productPage:{total:1,pages:1,size:14},
      productId:""
    }
  },
  methods:{
    //查询商品
    getProduct(){
      as.post("/product/selectProduct",{
        storeId:localStorage.getItem("storeId"),
        name:this.productInput.name,
        current:this.productPage.pages,
        size:this.productPage.size,
      }).then((res)=>{
        console.log(res)
        this.productData = res.data.data.records
        this.productPage.total = res.data.data.records.total
        this.productPage.total = res.data.data.total
      })
    },
    //查询分类
    getType(){
      as.post("/types/get").then((res)=>{
        console.log(res)
        this.typeList=res.data.data
        console.log(this.typeList)
      })
    },
    //查询商品规格
    getSpecs(){
      as.post("/productSpecs/get",{pid:this.productId}).then((res)=>{
        this.specsData = res.data.data
        console.log(res)
      })

    },

    //添加商品

    //下一页
    page(i){
      this.productPage.pages = i
      this.getProduct()
    },
    // 修改
    update(index,row){
      this.productDataRow = {...row}
      this.imgList = eval(row.imglist)
      this.updateProduct = true
    },
    //取消修改
    ProductClose(done){
      this.productDataRow = {}
      this.imgList = []
      done()
    },
    //取消添加
    addProductClose(done){
      this.imgList = []
      this.imgLists = []
      this.addProductData = {img:"",sid:localStorage.getItem("storeId")}
      this.imgShow = true
      done()
    },
    // 取消规格
    specsClose(done){
      this.specsData = []
      this.productId = ""
      done()
    },
    //取消添加规格
    addSpecsClose(done){
      this.addSpecsData = {}
      done()
    },
    //取消修改规格
    alterSpecsClose(done){
      this.alterSpecsData = {}
      done()
    },
    //确定添加
    addProduct(){
      this.addProductData.imglist = JSON.stringify(this.imgList)
      console.log(this.addProductData)
      as.post("/product/add",this.addProductData).then((res)=>{
        console.log(res)
        this.imgList = []
        this.addProductData = {img:"",sid:localStorage.getItem("storeId")}
        this.addProductShow = false
        this.getProduct()
        this.imgLists = []
        this.imgShow = true
        this.$message({
          message: res.data.message,
          type: 'success'
        });
      }).catch((ex)=>{
        console.log(ex)})
    },
    //确定修改
    ProductUpdate(){
      this.productDataRow.imglist = JSON.stringify(this.imgList)
      console.log(this.productDataRow)
      as.post("/product/alter",this.productDataRow).then((res)=>{
        console.log(res)
        this.getProduct();
      })
      this.productDataRow = {}
      this.updateProduct = false
      this.imgList = []
    },

    // 规格详情
    isSpecs(index,row){
      this.specsShow = true
      this.productId = row.id
      this.getSpecs()
    },
    //商品图片
    handleAvatarSuccess(res,file,fileList){
      this.imgShow = false
      this.addProductData.img  = res.name
      console.log(this.addProductData.img )
    },
    //图片列表添加
    handleSuccess(res,file,fileList){
      console.log(file)
      this.imgList.push(res.name)
      console.log(this.addProductData.imglist)
    },
    //图片列表删除
    handleRemove(file, fileList) {
      let name  = file.response.name
      let index = this.imgList.indexOf(name)
      if(index > -1){
        this.imgList.splice(index,1)
      }
      console.log(this.addProductData.imglist)
    },
    //修改商品图片
    alterHandleSuccess(res,file,fileList){
      this.productDataRow.img = res.name
    },
    //修改图片列表
    handleSuccess0(res, file) {
      this.$set(this.imgList,0,res.name)
    },
    handleSuccess1(res, file) {
      this.$set(this.imgList,1,res.name)
    },
    handleSuccess2(res, file) {
      this.$set(this.imgList,2,res.name)
    },
    //状态判断
    isType(row, column, cellValue, index){
      for(let type of this.typeList){
        if(type.id == cellValue){
          return type.name
        }
      }
    },
    isStatus(row, column, cellValue, index){
      if(cellValue == 1){
        return "上架"
      }else if (cellValue == 0 ){
        return '下架'
      }
    },
    //确定添加规格
    addSpecs(){
      this.addSpecsData.pid  = this.productId
      as.post("/productSpecs/add",this.addSpecsData).then((res)=>{
        this.addSpecsData = {}
        this.addSpecsShow = false
        this.getSpecs()
        console.log(res)
      }).catch((ex)=>{
        console.log(ex)})
    },
    //修改规格
    alterSpecs(index ,row){
      this.alterSpecsShow = true
      this.alterSpecsData = row
    },
    //确定修改规格
    isAlterSpecs(){
      as.post("/productSpecs/alter",this.alterSpecsData).then((res)=>{
        console.log(res)
        this.alterSpecsShow = false
        this.alterSpecsData = {}
      }).catch((ex)=>{
        console.log(ex)})
    },
    //删除规格
    deletSpecs(index,row){
    as.post("/productSpecs/delete",row).then((res)=>{
      this.getSpecs()
      console.log(res)
    }).catch((ex)=>{
      console.log(ex)})
    }


  }

}
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>